<template>
  <div>
    <el-form
      ref="form"
      :size="'medium'"
      :model="form"
      label-width="100px"
      v-loading="loading"
      disabled
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="机柜名称" prop="machineCabinetName">
            <el-input
              v-model="form.machineCabinetName"
              placeholder="请输入机柜名称"
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属站点" prop="station">
            <el-select
              v-model="form.station"
              placeholder="请选择所属站点"
              clearable
            >
              <el-option
                v-for="dict in stationOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="所属机房" prop="machineRoom">
            <el-select
              v-model="form.machineRoom"
              placeholder="请选择所属机房"
              clearable
            >
              <el-option
                v-for="dict in machineRoomOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="机柜编号" prop="machineCabinetNum">
            <el-input
              v-model="form.machineCabinetNum"
              placeholder="请输入机柜编号"
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="机柜尺寸" prop="machineCabinetSize">
            <el-input
              v-model="form.machineCabinetSize"
              placeholder="请输入机柜尺寸"
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="电源" prop="power">
            <el-select v-model="form.power" placeholder="请选择电源" clearable>
              <el-option
                v-for="dict in powerSourceOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="填报部门" prop="fillDept">
            <el-input
              v-model="form.fillDept"
              placeholder="请输入填报部门"
              disabled
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="填报人" prop="fillBy">
            <el-input
              v-model="form.fillBy"
              placeholder="请输入填报人"
              disabled
              suffix-icon="xxx"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getCabinet } from '@/api/machinecabinet/cabinet'
import { stationDictList } from '@/api/station/station'
import { machineRoomDictList } from '@/api/machineroom/machineroom'
export default {
  props: ['id'],
  data() {
    return {
      //所属站点下拉选
      stationOptions: [],
      //所属机房下拉选
      machineRoomOptions: [],
      //电源下拉选
      powerSourceOptions: [],
      // 表单参数
      form: {},
      loading: false,
    }
  },
  created() {},
  mounted() {
    this.loading = true
    getCabinet(this.id).then((response) => {
      this.form = response.data
      this.loading = false
    })
    stationDictList().then((res) => {
      this.stationOptions = res.data
    })
    machineRoomDictList().then((res) => {
      this.machineRoomOptions = res.data
    })
    this.getDicts('power_source').then((response) => {
      this.powerSourceOptions = response.data
    })
  },
  methods: {},
}
</script>

<style scoped></style>
